6. Why Email For Mobile?
In 2012, 11 out 100 mobiles sold in
India will be smartphones (In 2011, it
was 6)[1]
81% Indian smartphone owner access
email on the go [2]
Mobile opens world-wide will surpass
desktop opens this year: ReturnPath [3]
7. Is It For You?
Check Email Analytics
Device/email client stats
Check website
mobile visitors
What % of users are
on mobile?
How is this changing?
8. Doing Nothing Is Fine
Not optimizing may be a valid strategy
Does it make sense for your audience,
brand or business?
Focus on other ways to engage
audience
If mobile audience is small
If you have limited resources
9. Know Your Audience
People scan emails, more so on
mobiles
< 3% open on both mobile and desktop
People check email everywhere
In bed
In the bathroom
While waiting, to kill time
At their in-laws
10. Designing Emails For Mobile
Subject line: 30-35
characters
Pre-header (preview
text) very important
11. Typical Screen Sizes
Iphone:
– 320px X 480px - portrait
– 480px X 320px - landscape
Android:
– 350px X 480px - portrait
– 480 X 350 - landscape
iPad:
– 768 x 1024 - portrait
– 1024 x 768 - landscape
12. Designing Emails for Mobile
KISS – Keep it Simple & Straightforward
Large font in email body
– 14px text, 22px headings
Large call-to-actions, buttons
– 45 x 45px finger tap
Minimum images, smaller and lower
13. Designing Emails for Mobile
Encourage scrolling
Try vertical menus
Image Alt tags
Use percentage instead of fixed width
Single column
Go on a “word diet”
14. Design Case Study: Mobile
Optimized Email
Took an existing desktop email
– Viewed it on Blackberry, Andriod,
iPhone
Optimized to create a mobile email
– Viewed optimized version in Blackberry,
Android and iPhone
26. Responsive Email Design
Use CSS3 @media queries
– Detect screen size
– Display specific content on different
devices
Needs CSS skills
27. How Email Code Looks
<html>
<head>
<title>Email subject can be used here</title>
<style type=”text/css”>CSS3 Content Goes Here</style>
</head>
<body>HTML email code goes here</body>
</html>
28. How CSS Looks
@media screen and (max-width: 400px) {
.holmes {
margin-right: some value;
width: another value;
}
.watson {
margin-right: some value;
width: another value;
}
32. Is This Enough?
The big picture is still RoI
Look beyond optimizing emails
Optimize
– Landing pages
– Forms
Check website analytics
– Do you need a mobile website?
– Do you need an App?
33. Challenges
Is mobile email right for you?
List Segmentation
Design
Optimizing web pages
Justifying RoI
34. Resources
Mobile Statistics
– Convergence Catalyst
Design
– Emailology.org
– A List Apart
– Email on Acid
